<template>
  <div id="infoSearch">
		<!-- 检测信息追踪 -->
		<view class="nav-box-text">
			<image src="@/static/img/home/person.png" class="person"></image>
			<view class="welcome">
				<view><text>账号：Administrator</text></view>
				<view><text>角色：取样人员</text></view>
				<view><text>项目名称：项目1</text></view>
			</view>
		</view>
		
		<view class="infoList">
			<view class="title">
				<text>基本信息</text>
				<uni-tag class="project-status" text="已委托" type="success" size="small"/>
			</view>
		    <view class="items">
		    	<view class="item">
		    		  <text class="label">工程名称：</text>
		    		  <text class="value">测试项目1</text>
		    	</view>
				<view class="item">
					  <text class="label">委托单位：</text>
					  <text class="value">中冶赛迪</text>
				</view>
				<view class="item">
					  <text class="label">检测项目：</text>
					  <text class="value">混泥土试块抗压</text>
				</view>
				<view class="item">
					  <text class="label">送检类别：</text>
					  <text class="value">见证取样</text>
				</view>
				<view class="item">
					  <text class="label">二维码编号：</text>
					  <text class="value">2365999</text>
				</view>
				<view class="item">
					  <text class="label">报告编号：</text>
					  <text class="value">23659874</text>
				</view>
		    </view>
		</view>
		<uni-collapse accordion v-model="accordionVal" class="infoAccordion" @change="infoAccordionChange">
			<uni-collapse-item :title="item"  v-for="item in tabItems">
				<view class="content">
					
					<scroll-view class="scroll-view_x" scroll-x="true" @scroll="scroll">
						<!-- 取样见证 -->
						<view v-show="accordionVal == '0'" class="sample-container content-container">
							<view class="sample-persons content-box">
								<view class="sample-person content-item">
									<text>取样人员</text>
									<image class="imgs" src="../../static/img/info/p1.png" mode=""></image>
								</view>
								<view class="sample-person content-item">
									<text>见证人员</text>
									<image class="imgs" src="../../static/img/info/p2.png" mode=""></image>
								</view>
							</view>
							<view class="sample-code content-box">
								<view class="sample-code content-item">
									<text>取样二维码试件</text>
									<image class="imgs" src="../../static/img/info/img1.png" mode=""></image>
								</view>
								<view class="sample-code content-item">
									<text>见证二维码试件</text>
									<image class="imgs" src="../../static/img/info/img2.png" mode=""></image>
								</view>
							</view>
						</view>
						<!-- 封样 -->
						<view v-show="accordionVal == '1'" class="seal-container content-container">
							<view class="sub-title uni-text-right">图片</view>
							<view class="qy-box content-box">
								<view class="qy-item content-item">
									<text class="uni-text-right">取样试件</text>
									<image class="imgs" src="../../static/img/info/p4.png" mode=""></image>
									<image class="imgs" src="../../static/img/info/p5.png" mode=""></image>
									<image class="imgs" src="../../static/img/info/p6.png" mode=""></image>
								</view>
							</view>
							<view class="jz-box content-box">
								<view class="jz-item content-item">
									<text class="uni-text-right">见证试件</text>
									<image class="imgs" src="../../static/img/info/p4.png" mode=""></image>
									<image class="imgs" src="../../static/img/info/p5.png" mode=""></image>
									<image class="imgs" src="../../static/img/info/p6.png" mode=""></image>
								</view>
							</view>
							<view class="sub-title uni-text-right">音视频</view>
							<view class="sp-box content-box">
								<view class="sp-item content-item">
									<text class="uni-text-right">取样试件</text>
									<uni-icons type="videocam" color="#007aff" size="90" style="padding:20px"/>
									<!-- <image class="imgs" src="../../static/img/info/img1.png" mode=""></image> -->
								</view>
								<view class="sp-item content-item">
									<text class="uni-text-right">见证试件</text>
									<uni-icons type="videocam" color="#007aff" size="90" style="padding:20px"/>
								</view>
							</view>
						</view>
						<!-- 取样见证 -->
						<view v-show="accordionVal == '2'" class="content-container">
							<view class="content-box">
								<view class="content-item">
									<text>送检员</text>
									<image class="imgs" src="../../static/img/info/p3.png" mode=""></image>
								</view>
								<view class="content-item">
									<text>送检见证人员</text>
									<image class="imgs" src="../../static/img/info/p3.png" mode=""></image>
								</view>
							</view>
						</view>
						<!-- 取样见证 -->
						<view v-show="accordionVal == '3'" >
							<text @click="toPath('/pages/qualityReport/CheckReport')">检测报告.pdf</text>
						</view>
					</scroll-view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
		current: 0,
		idx:0,
		activeColor: '#007aff',
		tabItems:['取样见证过程','封样过程','收样过程','检测报告'],
		accordionVal:""
	}
  },
  onReady() {
    
  },
  methods: {
	selectTabs(e){
		this.idx=e
		this.current=e
	},
	infoAccordionChange(val){
		this.accordionVal = val
		console.log(this.accordionVal)
	},
	toPath(url) {
		uni.navigateTo({
			url: url
		})
	}
  }
}
</script>
<style lang="scss" scoped>
	
	#infoSearch {
		width: 100vw;
		height: 291.97rpx;
		margin-top: -80.29rpx;
		padding: 102.18rpx 36.49rpx 102.18rpx 36.49rpx;
		background-image: url(../../static/img/home/head-bg.png);
		.active{
			/* padding: 0rpx 18.24rpx; */
			font-size: 31.02rpx;
			font-weight: bold;
			white-space: nowrap;
			margin:0 9.12rpx;
			height: 72.99rpx;
			line-height: 72.99rpx;
			color: #007AFF;
			border-bottom: 5.47rpx solid #007AFF;
		}
		.title{
			height: 72.99rpx;
			line-height: 72.99rpx;
			font-size: 36.49rpx;
			font-weight: bold;
			border-bottom: 1.82rpx solid #e5e5e5;
			.project-status{
				margin-left: 20px;
			}
		}
		.sub-title{
			height: 72.99rpx;
			line-height: 72.99rpx;
			font-size: 28rpx;
			font-weight: bolder;
			border-bottom: 1.82rpx solid #e5e5e5;
			.project-status{
				margin-left: 20px;
			}
		}
		.nav-box-text {
			height: 145.98rpx;
			display: flex;
			align-items: center;
			.person {
				width: 109.48rpx;
				height: 109.48rpx;
			}
			.welcome {
				color: #333;
				font-size: 32rpx;
				margin-left: 40rpx;
			}
		}
		.infoList{
			padding-right: 27.37rpx;
			margin-top: 36.49rpx;
			.items{
				margin-top: 27.37rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				border-bottom: 0.5px solid #e5e5e5;
				.item{
					margin-bottom: 18.24rpx;
					width: 100%;
					display: flex;
					align-items: center;
					color: #606266;
					.label{
						margin-right: 9.12rpx;
						/* width: 145.98rpx; */
						text-align: right;
						white-space: nowrap;
					}
					.value{
						width: 55%;
						/* margin-left: 30.37rpx; */
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	    .infoAccordion{
			padding-right: 10px;
			/deep/.uni-collapse-item__title-box{
				padding: 0;
			}
			/deep/.uni-collapse-item__title-text{
				font-size: 36.49rpx;
				font-weight: bold;
			}
			.content{
				margin-top: 27.37rpx;
				padding-bottom: 10px;
				.scroll-view_x{
					white-space: nowrap;
					width: 100%;
				}
			}
			::v-deep .segmented-control__item{
				margin-right: 27.37rpx;
				white-space: nowrap;
			}
			.imgs{
				width: 182.48rpx;
				height: 182.48rpx;
				padding:5px;
			}
			/* 通用样式 */
			.content-container{
				padding-right: 18px;
				display: flex;
				flex-direction: column;
				align-items:center;
				.sub-title{
					font-size: 16px;
					font-weight: bolder;
					width: 100%;
					border-color: transparent;
				}
				.content-box{
					width:100%;
					padding: 10px 0 ;
					display: flex;
					align-items:center;
					justify-content: center;
					.content-item{
						padding: 0 30px;
						uni-text {
							display: block;
							text-align: center;
							line-height: 32px;
						}
						.uni-text-right {
							text-align: left;
						}
					}
				}
			}
			.projects{
				.items{
					margin-top: 18.24rpx;
					.item{
						margin-bottom: 18.24rpx;
						width: 100%;
						display: flex;
						align-items: center;
						color: #606266;
					}
				}
			}
			.contrast{
				.imges{
					margin-right: 27.37rpx;
					width: 182.48rpx;
					height: 182.48rpx;
				}
				.textList{
					display: flex;
					align-items: center;
					.text{
						display: block;
						margin-right: 27.37rpx;
						min-width: 182.48rpx;
					}
				}
				
			}
			.types{
				margin-bottom: 15px;
				display: flex;
				align-items: center;
				overflow: auto
				::v-deep.el-table {
				thead {
				  display: none;
				}
				}
				.item {
					white-space: nowrap;
				}
				.imgs {
					width: 120%;
					display: flex;
					margin-left: 36.49rpx;
					img {
					  margin-left: 18.24rpx;
					  width: 182.48rpx;
					  height: 182.48rpx;
					}
				}
			}
		}
	}
</style>
